<template>
  <swiper
    class="swiper"
    :autoplay="swiperOption.autoplay"
    :loop="swiperOption.loop"
    :speed="swiperOption.speed"
    :slides-per-view="2"
    :slides-per-column="1"
    :pagination="swiperOption.pagination"
  >
    <swiper-slide v-for="(item, index) in haveAreatInfo" :key="'pre' + index">
      <div class="notic">
        <h3>{{ item.alertInfo.h1 }}</h3>
        <p>{{ item.alertInfo.p }}</p>
      </div>
    </swiper-slide>
  </swiper>
</template>

<script>
// 滚动组件
import { defineComponent, reactive } from "vue";
import SwiperCore, {
  Navigation,
  Pagination,
  Scrollbar,
  A11y,
  Autoplay,
} from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/components/pagination/pagination.scss";
import "swiper/swiper.scss";
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Autoplay]);

// 数据

export default defineComponent({
  props: {
    allData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  setup(props) {
    const swiperOption = reactive({
      autoplay: {
        delay: 3000,
        disableOnInteraction: false,
      },
      loop: false,
      speed: 500,
      pagination: {
        clickable: true,
        type: "progressbar",
      },
    });

    // 处理所有有标记的页面
    const haveAreatInfo = reactive(
      props.allData.filter((item) => {
        return item.alertInfo;
      })
    );

    return {
      swiperOption,
      haveAreatInfo,
    };
  },
});
</script>

<style lang="scss" scoped>
.swiper {
  width: 100vw;
}
.notic {
  width: 170px;
  height: 220px;
  background: #e3e3e3;
  text-align: center;
  padding: 5px;
  border-radius: 10px;
  box-sizing: border-box;
  margin-top: 10px;
}
</style>
